<template>
	<div class="option-judge-input-container">
		<div class="option" v-for="(item, index) in value" :key="index">
			<el-form-item :label="`选项${index + 1} `" :prop="`${prop}.${index}.option`" style="padding-top: 10px; margin-left: 20px" required="true" :rules="rules.option">
				<el-input
					:value="item.option"
					:disabled="showDetail"
					@input="updateValue($event, index)"
					maxlength="20"
					placeholder="请编辑结果选项"
					@change="onChange(value[index].option)"
					style="width: 90%"
				></el-input>
			</el-form-item>
			<el-form-item label="下一步" :prop="`${prop}.${index}.nextStepOption`" style="margin-left: 20px" required="true" :rules="rules.nextStepOption">
				<el-select v-model="item.nextStepOption" :disabled="showDetail" placeholder="选择下一步操作" @change="onChange(value[index].nextStepOption)" class="optionList-select">
					<el-option v-for="item in nextStepOption" :key="item.value" :label="item.taskName" :value="item.taskId"> </el-option>
				</el-select>
			</el-form-item>
			<div class="btn" v-if="!showDetail">
				<img @click="deleteoptionList(index)" class="del-btn" :src="deleteImage" v-show="isActiveIcon && (index === 2 || index === 3)" />
				<img @click="addOptionList" class="add-btn" :src="insertImage" v-show="isActiveIcon && index === value.length - 1 && index !== 3" />
			</div>
		</div>
	</div>
</template>

<script>
import AIWorkflow from '@/modules/workFlow.js';
import delGroupImg from '@/assets/img/icon/del_group.png';
import addGroupImg from '@/assets/img/icon/add_group.png';
export default {
	name: '',
	components: {},
	props: {
		prop: {
			type: String,
			default: () => ''
		},
		value: {
			type: Array,
			required: true,
			default: () => []
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		nextStepOption: {
			type: Array,
			required: true,
			default: () => []
		}
	},
	data() {
		const vaildateRepeats = (rule, value, callback) => {
			console.log(value);
			let arr = [];
			this.value.forEach(item => {
				if (item.option.toString() === value) {
					arr.push(item.option.toString());
				}
			});
			if (arr.length > 1) {
				return callback(new Error('当前设置选项存在重复，请修改 '));
			}
			return callback();
		};
		return {
			isActiveIcon: true, // icon图标显示隐藏
			deleteImage: delGroupImg,
			insertImage: addGroupImg,
			isShowUserAttribute: false,
			// 验证规则校验
			rules: {
				option: [
					{
						required: true,
						message: '请编辑结果选项',
						trigger: ['blur', 'change']
					},
					{
						validator: vaildateRepeats,
						trigger: ['blur', 'change']
					}
				],
				nextStepOption: [
					{
						required: true,
						message: '请选择下一步操作',
						trigger: 'blur'
					}
				],
				nextStepOther: [
					{
						required: true,
						message: '请选择下一步操作',
						trigger: 'blur'
					}
				]
			}
		};
	},
	mounted() {
		const { nextStepOption } = AIWorkflow;
		this.options = nextStepOption;
	},
	methods: {
		// + 号icon 添加选项
		addOptionList() {
			this.$emit('input', this.prop, [...this.value, { option: '', nextStepOption: '' }]);
			// this.showDeleteIcon = true;
		},
		// 删除选项
		deleteoptionList(index) {
			console.log(index);
			const values = [...this.value];
			if (values.length - 1 > 1) {
				values.splice(index, 1);
				console.log(values);
				this.$emit('input', this.prop, values);
			}
		},
		// 点击 + 处理函数
		onAddVariable(attribute) {
			this.isShowUserAttribute = true;
			this.localUserAttribute = attribute;
		},
		onChange(val) {
			console.log(val);
		},
		updateValue(e, idx) {
			const values = [...this.value];
			values[idx].option = e;
			this.$emit('input', this.prop, values);
		}
	}
};
</script>

<style lang="less" scoped>
.option {
	width: calc(100% - 50px);
	height: 120px;
	background-color: #f9f9f9;
	margin-top: 15px;
	position: relative;
	.optionList-select {
		width: 90% !important;
	}
}

.btn {
	position: relative;
}
.add-btn {
	position: absolute;
	top: -28px;
	right: -30px;
}
.del-btn {
	position: absolute;
	top: -130px;
	right: -30px;
}
</style>
